<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.type-writer{
			width: 0;
			overflow: hidden;
			/*font-family: monospace;*/
			font-size: 16px;
			white-space: nowrap;
			border-right: 2px solid orange;
			animation: typing 10s steps(var(--chars)) forwards;
		}
		
		@keyframes typing {
			from{
				width: 0
			}
			to{
				width: calc(var(--el-width) * 1px);
			}
		}
	</style>
</head>
<body>
	<div class="type-writer">
		<span>this is a CSS typewriter effect</span>
	</div>
</body>
<script>
	document.querySelectorAll('.type-writer').forEach(el => {
		const text = el.textContent;
		const rect = el.children[0].getBoundingClientRect()
		el.style.setProperty('--chars', text.length);
		el.style.setProperty('--el-width', rect.width);
	});
</script>
</html>